<template>
  <div class="container">
    <el-container>
      <el-aside width="200px">
        <el-card>
          <el-form>
            <img style="width: 70px;border-radius: 50%" src="/qq.png">
            <div class="mt-5">admin</div>
          </el-form>
          <el-form>
            <img src="/等级.png">
          </el-form>
          <el-form inline style="margin-left: 10px">
            <el-form-item >0</el-form-item>
            <el-form-item style="margin-left: 20px">0</el-form-item>
          </el-form>
          <el-form inline>
            <el-form-item>关注</el-form-item>
            <el-form-item>粉丝</el-form-item>
          </el-form>
        </el-card>
        <el-card class="mt-5">
          <router-link to="/me">资源动态</router-link>
        </el-card>
        <el-card class="mt-5">
          <router-link to="/member" class="mt-10">我的会员</router-link>
          <div @click="doubleClick" class="mt-20">我的钱包</div>
          <div @click="doubleClick" class="mt-20">我的优惠券</div>
          <div @click="doubleClick" class="mt-20">我的订单</div>
          <div @click="doubleClick" class="mt-20">我卖的</div>
        </el-card>
        <el-card class="mt-5">
          <router-link to="/material" class="mt-10">我的资料</router-link>
        </el-card>
      </el-aside>
      <el-container>
        <el-header>
          <el-card>我的资料</el-card>
        </el-header>
        <el-main>
          <el-card style="min-height: 650px">
            <el-form :model="userForm" ref="userFormRef">
              <div class="box" style="margin-bottom: 30px;margin-left: 400px">
                <img src="/qq.png" style="width: 150px;border-radius: 50%">
              </div>
              <div style="margin-top: 20px;margin-left: 445px;margin-bottom: 20px">点击更换</div>
              <el-form inline>
                <el-form-item style="margin-left: 150px" label="用户名：">
                  <el-input v-model="userForm.username" placeholder="admin"/>
                </el-form-item>
                <el-form-item label="生日：">
                  <div class="demo-date-picker">
                    <div class="block">
                      <el-date-picker
                          v-model="userForm.birthDate"
                          type="date"
                          placeholder="1997-07-20"
                          :default-value="new Date(2010, 9, 1)"
                      ></el-date-picker>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item></el-form-item>
              </el-form>
              <el-form style="margin-left: 150px" inline>
                <el-form-item label="性别：">
                  <el-button disabled type="danger">男</el-button>
                  <el-button>女</el-button>
                </el-form-item>
                <el-form-item  style="margin-left: 100px" label="城市：">
                  <el-input v-model="userForm.address" placeholder="上海/上海"/>
                </el-form-item>
              </el-form>
              <el-form inline>
                <el-form-item  style="margin-left: 150px" label="成长等级:">
                  <img src="/等级.png">
                </el-form-item>
                <el-form-item  style="margin-left: 145px" label="技能水平:">
                  <el-dropdown>
                  <span class="el-dropdown-link">
                    零基础
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>零基础 零基础小白</el-dropdown-item>
                        <el-dropdown-item>业余初级 0-1年学龄</el-dropdown-item>
                        <el-dropdown-item>业余中级 1-2年学龄</el-dropdown-item>
                        <el-dropdown-item>业余高级 2-4年学龄</el-dropdown-item>
                        <el-dropdown-item>专业初级 4-6年学龄</el-dropdown-item>
                        <el-dropdown-item>专业中级 6-8年学龄</el-dropdown-item>
                        <el-dropdown-item>专业高级 8年以上学龄</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-form-item>
              </el-form>
              <el-form>
                <el-form-item  style="margin-left: 150px" label="兴趣技能：">
                  <el-tag
                      v-for="tag in dynamicTags"
                      :key="tag"
                      class="mx-1"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(tag)"
                      style="margin-right: 10px;"
                      type="info"
                      size="large"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                      v-if="inputVisible"
                      ref="InputRef"
                      v-model="inputValue"
                      class="ml-1 w-20 mb-10"
                      size="small"
                      @keyup.enter="handleInputConfirm"
                      @blur="handleInputConfirm"
                      style="width: 100px;height:30px;margin-top: 10px"
                  />
                  <el-button v-show="dynamicTags.length<7" style="width: 80px"  v-else class="button-new-tag ml-1" @click="showInput">
                     请选择
                  </el-button>
                </el-form-item>
              </el-form>
              <div style="margin-left: 450px">
                <el-button type="danger" @click="saveClick">保存</el-button>
              </div>
            </el-form>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup lang="ts">
import {ElMessage,ElInput} from 'element-plus'
import {onMounted, ref, nextTick, reactive} from 'vue'
import { useUserInfoStore } from '@/stores/login';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const loginStore = useUserInfoStore()
const value1 = ref('')

//正在开发中
const doubleClick =()=>{
  ElMessage({
    type: 'success',
    message: '正在开发中'
  })
}
//收集表单数据
const userForm = reactive({
  username:"admin",//用户名
  birthDate:"1997-07-20",
  address:"上海/上海",
})

//可关闭的tab页start
const inputValue = ref('')
const dynamicTags = ref(['拉丁舞', '街舞', '芭蕾舞','女团舞','水袖舞','恰恰','分解教学'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
//可关闭的tab页end
onMounted(()=>{
  loginStore.getList();
})

const saveClick =()=>{
  ElMessage({
    type: 'success',
    message: '保存成功'
  })
}
</script>

<style scoped lang="less">
.container {
  width: 1200px;
  margin: 0 auto;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>

<style >
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
